<template>
  <el-tooltip content="使用说明" placement="top-end">
    <el-button link icon="QuestionFilled" @click="open">
    </el-button>
  </el-tooltip>
  <el-drawer v-model="showDialog" append-to-body :destroy-on-close="true" :size="560">
    <!-- <v-md-preview :text="md"></v-md-preview> -->
    <div class="passage-wrapper">
      <h1>
        <div style="display:flex;align-items: center">
          <el-icon size="48px" style="margin-right:12px;">
            <QuestionFilled />
          </el-icon>
          <span>扇区信息使用说明</span>
        </div>
      </h1>
      <h2>1&nbsp;基础功能</h2>
      <p>界面左侧以图形形式显示当前扇区信息，包括各模块名称、频率；</p>
      <p>界面右侧显示当前各席位详细信息列表，包括：席位编号、频率、模块、人员以及席位状态</p>
      <h3>1.1&nbsp;数据来源</h3>
      <p>
        <b>模块</b>：同步于运行支持系统或手动预设（参考“扇区预设”）</p>
      <p>
        <b>人员</b>：同步于运行支持系统</p>
      <p>
        <b>频率</b>：手动设置（参考“频率设置”）</p>
      <p>
        <b>颜色</b>：手动设置（参考“颜色设置”）</p>
      <h3>当前/预设数据选择</h3>
      <p>若已经预设扇区布局（参考“扇区预设”），会显示如下控件：</p>
      <el-card style="width:240px;">
        <el-tooltip content="当前生效的扇区布局" placement="top-start">
          <el-button type="primary" size="small" :link="valueTarget != 'current'" @click="setValueTarget('current')">
            <span>当前</span>
          </el-button>
        </el-tooltip>
        <el-tooltip content="即将生效的扇区布局，点击显示详情" placement="top-start">
          <el-button type="danger" size="small" :link="valueTarget != 'planning'" @click="setValueTarget('planning')">
            <el-icon :class="[valueTarget == 'current' ? 'blinking' : '']">
              <BellFilled />
            </el-icon>
            <span>即将生效</span>
          </el-button>
        </el-tooltip>
      </el-card>
      <p>
        <span>单击</span>
        <el-button type="primary" size="small" style="margin:0 12px;">
          <span>当前</span>
        </el-button>
        <span>按钮可以设置图形显示为当前生效中的扇区布局</span>
      </p>
      <p>
        <span>单击</span>
        <el-button type="danger" size="small" style="margin:0 12px;">
          <el-icon class="blinking">
            <BellFilled />
          </el-icon>
          <span>即将生效</span>
        </el-button>
        <span>按钮可以设置图形显示为预设（未生效）的扇区布局</span>
      </p>
      <h3>1.2&nbsp;模块颜色</h3>
      <p>
        <el-tag type="info">AP01</el-tag>
        <span>：模块属于该席位</span>
      </p>
      <p>
        <el-tag class="blinking-slight" type="">AP01</el-tag>
        <span>：模块不属于该席位，但即将划分至该席位（参考“扇区预设”）</span>
      </p>
      <p>
        <el-tag class="blinking-slight" type="warning">AP01</el-tag>
        <span>：模块属于该席位，但即将划分至其他席位（参考“扇区预设”）</span>
      </p>
      <h3>1.3&nbsp;模块状态</h3>
      <p>模块状态有以下几种显示：</p>
      <p>
        <p>
          <el-tag type="">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>扇区暂未分配</span>
          </el-tag>
          <span>（即将新开扇区，预设暂未生效）</span>
        </p>
        <p>
          <el-tag type="warning">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>扇区暂未分配</span>
          </el-tag>
          <span>（模块即将变更，预设暂未生效）</span>
        </p>
        <p>
          <el-tag type="danger">
            <el-icon>
              <WarningFilled />
            </el-icon>
            <span>未分配扇区</span>
          </el-tag>
          <span>（已新开扇区/打卡，但未划分模块）</span>
        </p>
      </p>
      <h3>1.4&nbsp;人员状态图标</h3>
      <div style="display: flex">
        <el-button link>
          <div style="display: flex; flex-direction: column; margin: 0 24px">
            <el-icon size="36px">
              <Service />
            </el-icon>
            <div style="margin-top:12px;">管制席</div>
          </div>
        </el-button>
        <el-button link>
          <div style="display: flex; flex-direction: column; margin: 0 24px">
            <el-icon size="36px">
              <Phone />
            </el-icon>
            <div style="margin-top:12px;">协调席</div>
          </div>
        </el-button>
      </div>
      <h3>1.5&nbsp;人员状态颜色</h3>
      <p>
        <el-tag type="info">张山</el-tag>
        <span>：放单人员</span>
      </p>
      <p>
        <el-tag type="success">李轼</el-tag>
        <span>：教员、学员（带培中）</span>
      </p>
      <p>
        <el-tag type="warning">王梁</el-tag>
        <span>：同席位、同岗位重叠（交接班）</span>
      </p>
      <p>
        <el-tag type="danger" style="margin-right:3px;">
          <el-icon>
            <WarningFilled />
          </el-icon>
          <span>无打卡记录</span>
        </el-tag>
        <el-tag type="danger" style="margin-right:3px;">
          <el-icon>
            <Service />
          </el-icon>
          <span>管制席未打卡</span>
        </el-tag>
        <el-tag type="danger" style="margin-right:3px;">
          <el-icon>
            <Phone />
          </el-icon>
          <span>协调席未打卡</span>
        </el-tag>
        <span>：人员未打卡</span>
      </p>
      <h3>1.6&nbsp;席位状态</h3>
      <p>席位状态有以下几种显示：</p>
      <p>
        <el-tag type="info">当前</el-tag>
        <span>（当前席位）</span>
        <el-divider direction="vertical">
        </el-divider>
        <el-tag type="success">带培中</el-tag>
        <el-divider direction="vertical">
        </el-divider>
        <el-tag type="warning">重叠中</el-tag>
      </p>
      <h2>2&nbsp;频率设置</h2>
      <p>席位频率目前无任何方式自动获取，需要手动进行设置。</p>
      <p>
        <span>单击</span>
        <el-button link  style="margin:0 12px;">
          <el-icon>
            <Tools />
          </el-icon>
          <span>频率</span>
        </el-button>
        <span>按钮</span>
      </p>
      <p>弹出窗口中选择实际使用的频率（如下方控件）</p>
      <el-card style="width:240px;" header="修改频率">
        <el-select v-model="frequency">
          <el-option v-for="item in frequencies" :key="item.value" :label="item.value" :value="item.value" :disabled="item.value == '其他'">
            <span style="float: left">{{ item.value }}</span>
            <span v-show="item.seat != ''" style="float: right; color: #8492a6; font-size: 10px">{{ item.seat }}</span>
          </el-option>
        </el-select>
        <el-tag type="info" style="width: 100%; margin-top: 12px;margin-bottom: 6px">设置{{ seatName }}的频率为{{ frequency }}</el-tag>
        <div style="text-align: center; margin-top: 12px">
          <el-button type="primary">确定</el-button>
          <el-button type="primary" link>取消</el-button>
        </div>
      </el-card>
      <p>列表选项右侧的席位号代表该频率为此席位的默认频率</p>
      <p>若选择的频率不恰当会看到下列提示：</p>
      <p>
        <el-card style="width:240px;">
          <el-tag type="warning" style="width: 100%; margin-bottom: 6px">124.85为TM01的默认频率</el-tag>
          <el-tag type="danger" style="width: 100%; margin-bottom: 6px">124.85正在被TM01使用</el-tag>
        </el-card>
      </p>
      <h2>3&nbsp;颜色设置</h2>
      <p>
        <span>单击</span>
        <el-button link style="margin:0 12px;">
          <el-icon>
            <Tools />
          </el-icon>
          <span>颜色</span>
        </el-button>
        <span>按钮</span>
      </p>
      <p>在弹出窗口中选择适当的颜色，或输入RGB数值设置需要的颜色；</p>
      <p>颜色设置会保存并全局生效，该设置会影响所有席位；</p>
      <p>颜色设置会针对深色和暗色页面保存不同的数值（为避免设置的颜色在另一底色下难以看清）；</p>
      <p>
        <span>在页面左上角</span>
        <span style="margin:0 12px;">
          <el-switch v-model="darkMode" style="--el-switch-on-color: #626aef; --el-switch-off-color: #409EFF;" active-text="暗" inactive-text="亮" />
        </span>
        <span>选择亮色或暗色模式后，再设置模块颜色，即可设置特定配色下的模块颜色。</span>
      </p>
      <p>
      </p>
      <h2>4&nbsp;图形设置</h2>
      <p>
        <span>单击顶部</span>
        <el-button link  style="margin:0 12px;">
          <el-icon size="18px">
            <Operation />
          </el-icon>
        </el-button>
        <span>图形设置按钮</span>
      </p>
      <p>右侧弹出抽屉视图，在如下控件中进行设置：</p>
      <el-card>
        <el-form label-width="80px">
          <el-form-item label="模块标签">
            <el-radio-group v-model="indicatorSettings.showTags">
              <el-radio :value="true">显示&nbsp;(默认)</el-radio>
              <el-radio :value="false">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider>
          </el-divider>
          <el-form-item label="标签尺寸">
            <el-radio-group v-model="indicatorSettings.fontSize">
              <el-radio :value="12">小&nbsp;(默认)</el-radio>
              <el-radio :value="14">中</el-radio>
              <el-radio :value="16">大</el-radio>
              <el-radio :value="18">特大</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider>
          </el-divider>
          <el-form-item label="模块位置">
            <el-radio-group v-model="indicatorSettings.graphicIndex">
              <el-radio :value="0">层叠显示&nbsp;(默认)</el-radio>
              <el-radio :value="1">平铺显示</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider>
          </el-divider>
          <el-form-item label="模块边框">
            <el-radio-group v-model="indicatorSettings.showBorder">
              <el-radio :value="true">显示&nbsp;(默认)</el-radio>
              <el-radio :value="false">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider>
          </el-divider>
          <el-form-item label="不透明度">
            <el-radio-group v-model="indicatorSettings.unhoveredOpcity">
              <el-radio :value="0.8">80%</el-radio>
              <el-radio :value="0.7">70%&nbsp;(默认)</el-radio>
              <el-radio :value="0.6">60%</el-radio>
              <el-radio :value="0.5">50%</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-card>
      <p>该设置仅针对当前席位有效且不会保存，刷新页面后会回复默认设置。</p>
      <h2>5&nbsp;扇区预设</h2>
      <p>
        <span>单击顶部</span>
        <el-button link style="margin:0 12px;">
          <el-icon size="18px">
            <EditPen />
          </el-icon>
        </el-button>
        <span>扇区预设按钮</span>
      </p>
      <p>将即将变更的模块拖动到需要的席位下方</p>
      <p>
        <span>未变更模块会显示为</span>
        <el-tag>蓝色</el-tag>
        <span>，发生变更的模块会显示为</span>
        <el-tag type="warning">黄色</el-tag>
        <span>；</span>
      </p>
      <p>当前已经分配扇区的席位频率不可修改；</p>
      <el-card>
        <div class="planner-wrapper-outer">
          <div class="planner-wrapper-inner">
            <div class="planner-wrapper-seat" v-for="seat in planningArray">
              <div class="planner-wrapper-seat-title">
                <span style="display: flex; align-items: center">
                  <span>{{ seat.seatName }}</span>
                  <!-- <el-divider direction="vertical"></el-divider> -->
                </span>
                <!-- <span>{{ seat.seatName }}</span> -->
                <span style="display: flex; align-items: center">
                  <span style="
                  font-size: 12px;
                  padding-right: 8px;
                  text-decoration: line-through;
                  color: rgba(128, 128, 128, 0.5);
                  " v-if="seat.frequency != seat.planningFrequency">&nbsp;{{ seat.frequency == null ? "未设置" : seat.frequency }}&nbsp;</span>
                  <el-icon v-if="seat.frequency != seat.planningFrequency">
                    <DArrowRight />
                  </el-icon>
                  <!-- <el-tag type="warning" size="small">
                  {{ seat.planningFrequency }}
                  </el-tag> -->
                  <el-select v-if="seat.sectorCodes.length == 0" v-model="seat.planningFrequency" size="small" placeholder="未设置" style="width: 80px; margin-left: 12px">
                    <el-option v-for="frequency in frequencies" :label="frequency.value" :value="frequency.value">
                    </el-option>
                  </el-select>
                  <div v-else style="font-size: 12px; opacity: 0.5">{{ seat.planningFrequency }}</div>
                </span>
              </div>
              <draggable class="planner-wrapper-seat-content" v-model="seat.planningSectorCodes" group="sector" :sort="true" :animation="500" item-key="id">
                <template #item="{ element }">
                  <el-tag class="planner-sector-code" :type="seat.sectorCodes.indexOf(element) > -1 ? '' : 'warning'">{{ element }}</el-tag>
                </template>
              </draggable>
            </div>
          </div>
          <el-divider>
          </el-divider>
          <div class="planner-wrapper-command">
            <el-button type="primary">保存预设</el-button>
            <el-divider direction="vertical" style="margin: 0 24px">
            </el-divider>
            <el-popconfirm title="清除所有预设吗？">
              <template #reference>
                <el-button type="warning" link>清除</el-button>
              </template>
            </el-popconfirm>
            <el-divider direction="vertical" style="margin: 0 24px">
            </el-divider>
            <el-button type="info" link>取消</el-button>
          </div>
        </div>
      </el-card>
      <p>
        <span>设置结束后点击</span>
        <el-button style="margin:0 12px;" size="small" type="primary">保存预设</el-button>
        <span>按钮可保存</span>
      </p>
      <p>
        <span>点击</span>
        <el-button style="margin:0 12px;" type="warning" link>清除</el-button>
        <span>按钮可撤消扇区预设</span>
      </p>
      <p>保存后，页面右上方会显示以下提示：</p>
      <el-card style="width:240px;">
        <el-tooltip content="当前生效的扇区布局" placement="top-start">
          <el-button type="primary" size="small" :link="valueTarget != 'current'" @click="setValueTarget('current')">
            <span>当前</span>
          </el-button>
        </el-tooltip>
        <el-tooltip content="即将生效的扇区布局，点击显示详情" placement="top-start">
          <el-button type="danger" size="small" :link="valueTarget != 'planning'" @click="setValueTarget('planning')">
            <el-icon :class="[valueTarget == 'current' ? 'blinking' : '']">
              <BellFilled />
            </el-icon>
            <span>即将生效</span>
          </el-button>
        </el-tooltip>
      </el-card>
      <p>
        <span>单击</span>
        <el-button type="primary" size="small" style="margin:0 12px;">
          <span>当前</span>
        </el-button>
        <span>按钮可以设置图形显示为当前生效中的扇区布局</span>
      </p>
      <p>
        <span>单击</span>
        <el-button type="danger" size="small" style="margin:0 12px;">
          <el-icon class="blinking">
            <BellFilled />
          </el-icon>
          <span>即将生效</span>
        </el-button>
        <span>按钮可以设置图形显示为预设（未生效）的扇区布局</span>
      </p>
      <p>工具会不断刷新现场支持系统的数据，当实际扇区布局与预设扇区布局一致时，将会清空扇区预设。</p>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, computed,onMounted } from "vue";
import axios from "axios";
import draggable from "vuedraggable";
import useSeatStore from "@/store/seat.js";
const seatStore = useSeatStore();
import statics from "../configView/statics.json";
// const frequencies = computed(() => seatStore.frequencies);
const frequencies = computed(() => statics.frequencies);
const showDialog = ref(false);
const md = ref("# 使用说明");
const open = () => {
  // axios.get("./docs/Seats.md").then((res) => {
  //   md.value = res.data;
  // });
  showDialog.value = true;
};
const frequency = ref(124.850);
const seatName = ref("TM01");
const indicatorSettings=ref({
      showTags: true,
      graphicIndex: 0,
      fontSize: 12,
      showBorder: true,
      unhoveredOpcity: 0.7,
    }) ;
const planningArray = ref([]);
const initialize = () => {
  let status = seatStore.seatStatusFull;
  planningArray.value = [];
  if(status&&status.length>0){
  for (let i = 0; i < status.length; i++) {
    if (status[i].seatType == "普通管制") {
      planningArray.value.push({
        seatName: status[i].seatName,
        logicSectorCode: status[i].logicSectorCode,
        sectorCodes: JSON.parse(JSON.stringify(status[i].sectorCodes)),
        planningSectorCodes:
          status[i].planningSectorCodes == null
            ? JSON.parse(JSON.stringify(status[i].sectorCodes))
            : JSON.parse(JSON.stringify(status[i].planningSectorCodes)),
        frequency: status[i].frequency,
        // planningFrequency:
        //   status[i].planningFrequency == null
        //     ? status[i].frequency
        //     : status[i].planningFrequency,
        planningFrequency: status[i].frequency,
      });
    }
  }
}
};
onMounted(()=>{
  initialize();
});
// 
const valueTarget = ref("current");
const setValueTarget = (target) => {
  valueTarget.value = target;
};
//
const darkMode=ref(true);
</script>

<style scoped>
@import "../styles/blinking.css";
.passage-wrapper{
  padding:0 16px;
}
/* h1 {
  padding-top: 0px;
  padding-bottom: 32px;
} */
h2 {
  border-top: 1px solid rgba(128, 128, 128, 0.5);
  margin-top: 24px;
  margin-bottom: 12px;
  padding-top: 24px;
  padding-bottom: 12px;
}
h3 {
  border-top: 1px dashed rgba(128, 128, 128, 0.25);
  margin-top: 12px;
  margin-bottom: 6px;
  padding-top: 12px;
  padding-bottom: 6px;
}
p {
  padding-top: 12px;
  padding-bottom: 12px;
}
/* planner */
* {
  box-sizing: border-box;
}

.planner-wrapper-outer {
  /* max-height: calc(90vh - 480px); */
}

.planner-wrapper-inner {
  column-count: 2;
  column-gap: 12px;
}

.planner-wrapper-seat {
  height: 100%;
  overflow: auto;
  margin-bottom: 16px;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 4px;
  transition: all 0.5s ease-in-out;
}

.planner-wrapper-seat:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.planner-wrapper-seat-title {
  width: 100%;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* font-size: 14px; */
  /* font-weight: bold; */
  /* background-color: rgba(128, 128, 128, 0.3); */
  background-color: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.planner-wrapper-seat-content {
  width: 100%;
  min-height: 36px;
  padding: 4px;
  text-align: justify;
  /* border: 1px solid #f66; */
}

.planner-sector-code {
  margin: 2px;
  padding: 0px 8px;
  font-size: 14px;
  user-select: none;
  cursor: pointer;
  font-family: "Consolas", "Courier New", monospace;
}

.planner-wrapper-command {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
